<template>
  <div class="other-setting-panel">
    <div class="other-setting-main">
      <div class="setting-item">
        <h2>
          <div class="title">{{$t('event.setting.serviceEventTypeSetting.flow.steps.otherSettingPanel.title1')}}</div>
          <el-switch v-model="eventSeniorConfig.allowPause.state"/>
        </h2>
        <approve-setting
          v-if="eventSeniorConfig.allowPause.state"
          class="approve-setting"
          :approve-setting="eventSeniorConfig.allowPause.approver"
          :options="approveOptions"
          flowType="allowPause"
          :taskTypeId="serviceEventTypeId"
          @change="setting => handleChangeApproveSetting(setting, 'allowPause')"
        />
      </div>
      <div class="setting-item">
        <h2>
          <div class="title">
            {{$t('event.setting.serviceEventTypeSetting.flow.steps.otherSettingPanel.title2')}}
            <el-tooltip :content="$t('event.setting.serviceEventTypeSetting.flow.steps.otherSettingPanel.tips1')" placement="top">
              <i class="el-icon-question el-tooltip"></i>
            </el-tooltip>
          </div>

          <el-switch v-model="eventSeniorConfig.completeCancel.state" />
        </h2>
        <approve-setting
          v-if="eventSeniorConfig.completeCancel.state"
          class="approve-setting"
          :approve-setting="eventSeniorConfig.completeCancel.approver"
          :options="approveOptions"
          flowType="completeCancel"
          :taskTypeId="serviceEventTypeId"
          @change="setting => handleChangeApproveSetting(setting, 'completeCancel')"
        />
      </div>
      <!-- 纯客服云版本不显示事件转工单 -->
      <div class="setting-item" v-if="_isShowTaskModule">
        <h2>
          <div class="title">{{$t('event.setting.serviceEventTypeSetting.flow.steps.otherSettingPanel.title3')}}</div>
          <el-switch v-model="eventSeniorConfig.allowConvert.state" />
        </h2>
        <approve-setting
          v-if="eventSeniorConfig.allowConvert.state"
          class="approve-setting"
          :approve-setting="eventSeniorConfig.allowConvert.approver"
          :options="approveOptions"
          flowType="allowConvert"
          :taskTypeId="serviceEventTypeId"
          @change="setting => handleChangeApproveSetting(setting, 'allowConvert')"
        />
      </div>
      
      <!-- 允许事件负责人将事件转为工单 按钮开启才展示 -->
      <div class="setting-item" v-if="eventSeniorConfig.allowConvert.state">
        <h2>
          <div class="title">{{$t('event.setting.serviceEventTypeSetting.flow.steps.otherSettingPanel.title4')}}</div>
          <el-switch v-model="eventSeniorConfig.autoCompleteEvent" />
        </h2>
      </div>

      <!--S 触发器 -->
      <trigger-list-setting
        v-if="triggerGray"
        :subTitle="$t('common.connector.trigger.eventSubTitle')" 
        bizType="EVENT"
        :bizTypeId="serviceEventTypeId"
      >
      </trigger-list-setting>
      <!--E 触发器 -->

      <!-- <div class="setting-item">
        <h2>
          <div class="title">
            知识库配置
            <el-tooltip
              placement="top"
              content="1：指定字段在工单转知识库过程中，将自动填充到知识库内容中作为素材使用；2：指定字段会作为知识库推荐依据"
            >
              <i class="el-icon-question el-tooltip"></i>
            </el-tooltip>
          </div>
        </h2>
        <el-select
          class="el-select"
          v-model="wikiSettingIds"
          multiple
          placeholder="请选择"
        >
          <el-option
            v-for="item in fieldTypeList"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          >
          </el-option>
        </el-select>
      </div> -->
    </div>
  </div>
</template>

<script>
import { cloneDeep, isEqual } from 'lodash';

import ApproveSetting from '../components/ApproveSetting.vue';
import TriggerListSetting from '@src/modules/connector/components/trigger-list-setting/index.vue';
import { getRootWindow } from '@src/util/dom';
/* mixin */
import { VersionControlTaskMixin } from '@src/mixins/versionControlMixin'

export default {
  name: 'other-setting-panel',
  mixins: [VersionControlTaskMixin],
  inject: ['flowData'],
  data() {
    return {
      wikiSettingIds: [],
      fieldTypeList: [],
    };
  },
  computed: {
    eventSeniorConfig() {
      return this.flowData.serviceEventTypeConfig.config;
    },
    //  审批人设置
    approveOptions() {
      let options = [
        {
          value: 'leader',
          label: this.$t('event.setting.serviceEventTypeSetting.flow.steps.otherSettingPanel.label1'),
        },
        {
          value: 'users',
          label: this.$t('event.setting.serviceEventTypeSetting.flow.steps.otherSettingPanel.label2'),
        },
        {
          value: 'createUser',
          label: this.$t('event.setting.serviceEventTypeSetting.flow.steps.otherSettingPanel.label3'),
        },
        {
          value: 'userAdmin',
          label: this.$t('event.setting.serviceEventTypeSetting.flow.steps.otherSettingPanel.label4'),
        },
        {
          value: 'promoter',
          label: this.$t('event.setting.serviceEventTypeSetting.flow.steps.otherSettingPanel.label5'),
        },
      ];
      return options;
    },
    // 触发器灰度
    triggerGray(){
      const RootWindow = getRootWindow(window);
      return RootWindow.grayAuth?.TRIGGER || false;
    },
    serviceEventTypeId() {
      return this.flowData.serviceEventTypeId;
    },
    newTriggerGray() {
      const RootWindow = getRootWindow(window);
      return RootWindow.grayAuth?.NEW_TRIGGER || false;
    },
  },
  methods: {
    /** 更新审批设置*/
    handleChangeApproveSetting(value, key) {
      this.$set(
        this.flowData.serviceEventTypeConfig.config[key],
        'approver',
        value
      );
    },
  },
  components: {
    ApproveSetting,
    TriggerListSetting,
  },
};
</script>

<style lang="scss" scoped>
.other-setting-panel {
  padding: 12px;
  min-height: calc(100vh - 48px);
  .other-setting-main {
    padding: 20px;
    width: 100%;
    height: 100%;
    background: #ffffff;
    border-radius: 4px;
    .trigger-list-setting{
      position: relative;
      &::before{
        content: "";
        position: absolute;
        left: 0;
        top: 2px;
        display: inline-block;
        width: 2px;
        height: 15px;
        background: $color-primary-light-6;
        border-radius: 2px;
      }
      .trigger-list-setting-header {
        padding-left: 12px;
      }
    }
  }
  .setting-item {
    margin-bottom: 15px;
    padding-bottom: 16px;
    width: 100%;
    border-bottom: 1px dotted #d9d9d9;
    &:nth-last-of-type(1) {
      border-color: transparent;
    }
    .el-icon-question {
      color: #8c8c8c;
    }
  }
  h2 {
    position: relative;
    margin-bottom: 12px;
    width: 100%;
    font-size: 14px;
    font-weight: bold;
    color: #333333;
    text-indent: 8px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    &:before {
      content: '';
      position: absolute;
      left: 0;
      top: 50%;
      transform: translateY(-50%);
      width: 2px;
      height: 14px;
      background: $color-primary-light-6;
      border-radius: 2px;
    }
  }
}

.el-select {
  width: 100%;
}

.approve-setting {
  ::v-deep .setting-approve-people {
    width: auto;
   .el-radio-group{
     margin-bottom: 5px;
   } 
    .setting-approve-tit2 {
      margin-top: 0;
    }
    .el-select{
      margin: 0 8px !important;
      width: auto !important;
    }
    .el-input {
      width: auto !important;
      margin-right: 24px;
    }
  }
}
</style>
